<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>My personal website</title>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">

    <script src="./js/flexible.js"></script>
    <script src="./js/jquery-3.5.1.min.js"></script>
</head>
<style>
</style>

<body>
    <!-- header -->
    <header>

        <div class="m_nav">
            <div class="container">
                <h2><a href="#">My Personal Website</a></h2>
                <a href="#" class="list"><i class="iconfont icon-list"></i></a>
            </div>
            <ul class="m_list">
                <li><a href="./templates/Home.html">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="./贪吃蛇/snake.html">Personal Center</a></li>
            </ul>
        </div>

        <div class="nav ">
            <div class="toggle"></div>
            <ul>
                <li><a href="./templates/Home.html" target="_blank">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Personal Center</a></li>
                <li>
                    <div class="list">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </li>
            </ul>

        </div>
        <div class="mask"></div>
        <div class="intro">
            <span class="animate__fadeIn">My </span>
            <span class="blink"> personal website</span>
            <p class="heading">Welcome to my personal website, this is my first independent project and I would like
                your advice</p>
        </div>
        <i class="iconfont icon-down Bottom"></i>

    </header>


    <!-- 主体 -->
    <main>
        <section>
            <!-- news -->
            <div class="main_left">
                <div class="left">
                    <div class="content">
                        <div class="content_left">
                            <span class="cate"><a href="#">Uncateforized</a> <a href="#">2 Comments</a></span>
                            <h2><a href="#">Hello world!</a></h2>
                            <span><a href="#">Theme Admin </a> · April 9, 2023</span>
                            <p style="line-height: 1.5;">Welcome to my personal website. This is my first personal
                                website.</p>
                            <a href="#" class="btn">Read more <i class="iconfont icon-toright"></i></a>
                        </div>
                    </div>
                    <div class="content">
                        <div class="content_left">
                            <span class="cate"><a href="#">Uncateforized</a></span>
                            <h2><a href="#">More Tags</a></h2>
                            <span><a href="#">Theme Admin </a> · April 9, 2023</span>
                            <p>More of these posts need tags..</p>
                            <a href="#" class="btn">Read more <i class="iconfont icon-toright"></i></a>
                        </div>
                    </div>
                    <div class="content">
                        <div class="content_left">
                            <span class="cate"><a href="#">Uncateforized</a></span>
                            <h2><a href="#">Links</a></h2>
                            <span><a href="#">Theme Admin </a> · April 9, 2023</span>
                            <p style="line-height: 1.5;">A few well known WordPress links: WordPress.org, the Codex and
                                the download page..</p>
                            <a href="#" class="btn">Read more <i class="iconfont icon-toright"></i> </a>
                        </div>
                    </div>
                    <div class="content">
                        <div class="content_left">
                            <span class="cate"><a href="#">Uncateforized</a></span>
                            <h2><a href="#">Worth A Thousand Words</a></h2>
                            <span><a href="#">Theme Admin </a> · April 9, 2023</span>
                            <p>Boat.</p>
                            <a href="#" class="btn">Read more <i class="iconfont icon-toright"></i>

                            </a>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="content">
                        <div class="content_right">
                            <span class="cate"><a href="#">Uncateforized</a> <a href="#">1 Comments</a></span>
                            <h2><a href="#">HTML</a></h2>
                            <span><a href="#">Theme Admin </a> · April 9, 2023</span>
                            <p>
                                What HTML tags would you like to see? Let’s start with an unordered list: One Two Three
                                Four And then move on to a more …
                            </p>
                            <a href="#" class="btn">Read more <i class="iconfont icon-toright"></i></a>
                        </div>
                    </div>
                    <div class="content">
                        <div class="content_right">
                            <span class="cate"><a href="#">Uncateforized</a></span>
                            <h2><a href="#">Elements</a></h2>
                            <span><a href="#">Theme Admin </a> · April 9, 2023</span>
                            <p>
                                The purpose of this HTML is to help determine what default settings are with CSS and to
                                make sure that all possible HTML Elements are …
                            </p>
                            <a href="#" class="btn">Read more <i class="iconfont icon-toright"></i></a>
                        </div>
                    </div>
                    <div class="content">
                        <div class="content_right">
                            <span class="cate"><a href="#">Uncateforized</a></span>
                            <h2><a href="#">Gategory Hierachy</a></h2>
                            <span><a href="#">Theme Admin </a> · April 9, 2023</span>
                            <p>
                                This post has 4 categories, part of a hierarchy that is 3 deep. Lorem ipsum dolor sit
                                amet, consectetuer adipiscing elit. Fusce euismod commodo ante. …
                            </p>
                            <a href="#" class="btn">Read more <i class="iconfont icon-toright"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- nav -->
            <div class="main_right">
                <div class="m_r_one">
                    <h2 class="m_title"><span>Gategories</span></h2>
                    <ul>
                        <li><a href="#">First Child CateGory</a></li>
                        <li><a href="#">One Grandchild Category</a></li>
                        <li><a href="#">Parent</a></li>
                        <li><a href="#">Second Child CateGory</a></li>
                        <li><a href="#">Uncategorized</a></li>
                    </ul>
                </div>
                <div class="m_r_two">
                    <h2 class="m_title"><span>Meta</span></h2>
                    <ul>
                        <li><a href="#">Login</a></li>
                        <li><a href="#">Entries feed</a></li>
                        <li><a href="#">Comments feed</a></li>
                        <li><a href="#">website</a></li>
                    </ul>
                </div>
            </div>
        </section>

    </main>
    <!-- footer 底部 -->
    <footer>
        <div class="footer-top">
            ©2023 Yier Wang
        </div>
        <div class="footer-bottom">
            <span> Powered by </span>
            <span class="active">Yier Wang</span>
        </div>

    </footer>
    <!-- 返回顶部 -->
    <div class="Top">
        <i class="iconfont icon-top"></i>
    </div>
</body>
<script src="./js/lodash.min.js"></script>
<script>
    // 兼容性
    $(function () {
        const pageHeight = document.documentElement.clientHeight
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        //  backTop显示与隐藏

        $(window).scroll(function () {
            let Top = $(window).scrollTop()
            // console.log(Top)
            if (Top > 400) {
                $('.Top').css('opacity', '1')
            } else {
                $('.Top').css('opacity', '0')
            }
        })

        // backTop
        let Width = $('header').height()
        $('.Top').click(function () {
            $('html, body').animate({ scrollTop: '0px' }, 1000)
        })
        $('.Bottom').on('click', _.throttle(function () {
            $('html, body').animate({ scrollTop: Width }, 1000)
        }, 1000))

        // 手机端list

        $('.list').click(function () {
            $('.m_list').slideToggle('slow', 'linear')

        })
        //当下拉框失去焦点时，关闭
        $('body *').click(function (e) {
            // 触发该事件的直接元素
            var type = e.target;
            // 点击其他地方，悬浮框失去焦点隐藏,3种情况
            // 1、点击的不是作者名称；2、点击的不是悬浮框；3、点击的直接元素不是悬浮框内某一个子元素
            if ((type.className != 'm_nav') && (type.className != 'm_list') && ($(e.target).parents().filter('.m_nav').length === 0)) {
                $('.m_list').slideUp(1000)
            }
        })

       
        // nav类名控制

        $('.nav ul li').children('a').click(function () {
            $(this).addClass('active').parent().siblings().children().removeClass('active')

        })

        // 隐藏nav]
        window.addEventListener('scroll', () => {
            let h = document.documentElement.scrollTop
            // console.log(h) 
            if(h >= pageHeight) {
                $('.nav').hide()
            }else {
                $('.nav').show()
            }

        })

    })


    // 简单的节流函数
    function throttle(func, wait, mustRun) {
        var timeout,
            startTime = new Date();

        return function () {
            var context = this,
                args = arguments,
                curTime = new Date();

            clearTimeout(timeout);
            // 如果达到了规定的触发时间间隔，触发 handler
            if (curTime - startTime >= mustRun) {
                func.apply(context, args);
                startTime = curTime;
                // 没达到触发间隔，重新设定定时器
            } else {
                timeout = setTimeout(func, wait);
            }
        };
    };

    // 实际想绑定在 scroll 事件上的 handler
    function realFunc() {
        mask()
    }

    // 采用了节流函数
    window.addEventListener('scroll', throttle(realFunc, 500, 1000));

    // let opacity = 0.6
    
    function mask() {

        window.addEventListener('scroll', function () {
            let mask = document.querySelector('.mask')
            if (document.documentElement.scrollTop < 200) {
                mask.style.opacity = 0.6
            } else if (document.documentElement.scrollTop > 200 && document.documentElement.scrollTop < 300) {
                mask.style.opacity = 0.7
            } else if (document.documentElement.scrollTop > 300 && document.documentElement.scrollTop < 400) {
                mask.style.opacity = 0.8
            } else if (document.documentElement.scrollTop > 400 && document.documentElement.scrollTop < 500) {
                mask.style.opacity = 0.9
            } else {
                mask.style.opacity = 1
            }
        })
    }
    // 获取页面的高度
    // 监视页面滚动事件来控制背景的透明度
    // function mask() {
    //     let mask = document.querySelector('.mask')
    //     window.addEventListener('scroll', function () {
    //         let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    //         mask.style.opacity = 1 + scrollTop / 5000
    //     })
    // }

    // const root = document.documentElement
    // let heading = document.querySelector(".heading")
    // // let length = heading.style.
    // root.style.setProperty('--length', heading.textContent.length)

</script>

</html>